<template>
  <div class="res">
    <el-header class="title">所有商品</el-header>
    <el-row :gutter="12" class="mt-3">
      <el-col v-for="item in items" :key="item.id" @click="goToItemDetail(item.id)" :span="6">
        <el-card :body-style="{ padding: '0px' }" class="m-1">
          <img :src="defaultImg" class="image">
          <div style="padding: 14px;">
            <span>{{ item.name }}</span>
            <div class="bottom clearfix">
              <div class="price">{{ '￥' + item.price }}</div>
              <el-button class="button" type="text" @click="addToCart(item)">
                <i class="el-icon-shopping-cart-2" style="width: 50px"></i></el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "all",
  data() {
    return {
      items: [
        require('@/assets/items/default.jpg'), // 第一张图片
        require('@/assets/items/default.jpg'), // 第二张图片（用于中间上半部分）
        require('@/assets/items/default.jpg'), // 第三张图片（用于中间下半部分）
        require('@/assets/items/default.jpg'), // 第四张图片
      ],
      defaultImg: require('@/assets/items/default.jpg')
    };
  },

  methods: {
    fetchProducts() {
      axios.get('/item/find')
          .then(response => {
            this.items = response.data.map(item => ({
              ...item,
              imgUrl: '/assets/items/' + item.imgUrl
            }));
          })
          .catch(error => {
            console.error('There was an error fetching the items:', error);
          });
    },
    addToCart(item) {
      axios.post('/cart/add', {
        itemId: item.id,
        amount: 1, // 初始添加数量为1
        price: item.price // 假设价格已经包含在 item 对象中
      }).then(response => {
        // 假设后端返回的数据中包含一个表示操作成功的状态码或消息
        if (response.data.success || response.status === 200) { // 根据你的后端API实际情况调整
          this.$message({
            message: '添加成功！',
            type: 'success' // 可以是 'success', 'warning', 'info', 'error'
          });
          // 如果需要，可以触发一个自定义事件来更新购物车总数
          this.$emit('cart-updated', response.data);
        } else {
          // 如果后端返回了错误，你也可以在这里处理
          this.$message.error('添加失败！');
        }
      }).catch(error => {
        console.error('Error adding item to cart:', error);
        // 在catch块中，你也可以显示一个错误消息
        this.$message.error('网络错误，请稍后再试！');
      });
    }
  },
  created() {
    this.fetchProducts();
  },

  /*watch:{
    // 监听路由变化
    '$route': function(newRoute, oldRoute) {
      // 检查路由是否真的发生了变化（路径或参数）
      if (newRoute.path !== oldRoute.path) {
        // 调用方法来更新数据
        this.fetchProducts();
      }
    }
  }*/
}
</script>

<style scoped>
.res {
  text-align: center; /* 设置文本居中 */
  width: 60%;
  margin: auto;
}

.title {
  margin: 20px auto;
  width: 25%;
  border: 1px solid black;
  padding: 10px 0;
  font-size: 20px;
  /*  margin-left: auto; !* 添加自动外边距实现水平居中 *!
    margin-right: auto; !* 添加自动外边距实现水平居中 *!*/
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}

.el-card {
  margin-bottom: 20px; /* 添加卡片底部间距 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); /* 添加卡片阴影 */
}

.el-col {
  height:auto;
}

.image {
  width: 100%; /* 使图片宽度充满卡片 */
  display: block; /* 防止图片下方出现间隙 */
}

.bottom {
  display: flex; /* 使用 Flexbox 布局 */
  justify-content: space-between; /* 两端分布 */
  align-items: center; /* 垂直居中 */
  margin-top: 13px; /* 添加价格和按钮的顶部间距 */
}

.price {
  font-size: 20px; /* 调整价格字体大小 */
  color: #999; /* 调整价格颜色 */
}

.button {
  padding: 0; /* 移除按钮的内边距 */
  float: right; /* 将按钮右浮动 */
}

.clearfix:before,
.clearfix:after {
  display: table; /* 清除浮动 */
  content: "";
}

.clearfix:after {
  clear: both;
}

.button {
  text-align: center;
  font-size: 25px;
  padding: 10px; /* 增加一些内边距，确保图标和文字不会紧贴边缘 */
  color: #42b983; /* 默认颜色 */
  margin-left: 50px;
  width: 40px; /* 设置按钮宽度 */
  height: 40px; /* 设置按钮高度 */
  border-radius: 50%; /* 设置边框半径为50%，使按钮成为圆形 */
  display: inline-flex; /* 使用flex布局，确保内容居中 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  transition: all 0.3s; /* 平滑过渡效果 */
  border: none; /* 移除边框，如果需要可以设置边框 */
}

.button:hover {
  color: #ffffff; /* 鼠标悬停时改变文字颜色 */
  background-color: #42b983; /* 鼠标悬停时改变背景颜色 */
  cursor: pointer; /* 鼠标悬停时改变鼠标光标样式 */
  box-shadow: 0 2px 12px rgba(66, 185, 131, 0.5); /* 鼠标悬停时添加阴影 */
}
</style>
